  <template>
      <div id="dplayer" class="dplayer video-box"></div>
  </template>


  <script setup lang="ts">
  import Hls from 'hls.js'  //用于播放hlv格式
  import Flv from 'flv.js'  //用于播放m3u8格式
  import DPlayer, { DPlayerDanmaku, DPlayerEvents } from 'dplayer'
  import { onMounted,defineProps } from 'vue'

  const p=defineProps<{
      videoUrl:string
  }>()
  const loadVideo=()=>{
    const dp = new DPlayer({
          container: document.getElementById('dplayer'), //播放器容器元素
          autoplay: false, //是否自动播放
          live: false, //是否直播
          theme: '#b7daff', //主题色 底部进度条相关颜色
          loop: false, //是否循环播放
          lang: 'zh-cn', //语言
          hotkey: true, //开启热键，支持快进、快退、音量控制、播放暂停
          preload: 'auto', //视频预加载，可选值: 'none', 'metadata', 'auto'
          volume: 0, //初始化音量
          playbackSpeed: [0.5, 1, 2, 4, 8], //播放速度
          mutex: false, //互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
          preventClickToggle: false, //阻止点击播放器时候自动切换播放/暂停
          video: {
            pic: '', // 视频封面
            url: p.videoUrl , //视频链接
            thumbnails:'',//视频缩略图，可以使用 DPlayer-thumbnails生成
            type: 'auto', //可选值: 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' 或其他自定义类型,
          },
        })
        //考虑隐私问题，初始化时把音量设为0,才可自动播放
        //dp.volume(percentage: number, nostorage: boolean, nonotice: boolean): 设置视频音量
        dp.volume(0, true, true) 
        //视频组件加载完成后自动播放
        dp.on('loadedmetadata' as DPlayerEvents, function () {
          dp.play()
        })
        //视频流出问题时触发
        dp.on('error' as DPlayerEvents, function () {
          if (document.getElementById('player')) {
            //当前时间＋1
            let time = Number(Math.round(dp.video.currentTime + 1))
            //重新加载视频
            loadVideo()
            //跳转到更新后的时间
            dp.seek(time)
          }
        })
  }

  onMounted(()=>{

    loadVideo()
  })

  </script>

  <style scoped>

  .video-box {
    max-width: 95%;
    width: 100%;
    border: 1px;
    border-radius: 20px;
    background-color: #000;
  }

  :deep(.dplayer-menu,.dplayer-mask) {
    display: none !important;
  }

  :deep(.dplayer-video-wrap) {
    height: 100%;
  }

  :deep(.dplayer-video) {
    height: 100%;
    object-fit: contain;
  }
  </style>